<template>
  <div class="content">
    <div class="title">
      <h2>热门精选</h2>
    </div>
    <div class="houseList">
      <template v-for="(item, index) in houseList" :key="item.data.houseId">
        <itemV3
          v-if="item.discoveryContentType === 3"
          :houselist="item"
          @click="toDetail(item.data)"
        />
        <itemV9
          v-else-if="item.discoveryContentType === 9"
          :houselist="item"
          @click="toDetail(item.data)"
        />
      </template>
    </div>
    <!-- <button @click="moredata">加载更多</button> -->
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia"
import { useRouter, useRoute } from "vue-router"

import { useHomeData } from "@/stores/modules/home"
import itemV3 from "@/components/houseList-item/houseList-item-v3.vue"
import itemV9 from "@/components/houseList-item/houseList-item-v9.vue"
import { useDetailStore } from "@/stores/modules/detail"

const homeData = useHomeData()
homeData.fetchHouseListData()
const { houseList } = storeToRefs(homeData)

// const moredata = () => {
//   homeData.fetchHouseListData()
// }

// watch(isReachBottom, (newValue) => {
//   if (newValue) {
//     homeData.fetchHouseListData().then(() => {
//       isReachBottom.value = false
//     })
//   }
// })
const router = useRouter()

const detailStore = useDetailStore()
const { houseId } = storeToRefs(detailStore)

const toDetail = (data) => {
  houseId.value = data.houseId
  detailStore.fetchDetailData()
  router.push("/detail/" + data.houseId)
}
</script>

<style lang="less" scoped>
.title {
  padding: 12px;
}
.houseList {
  display: flex;
  flex-wrap: wrap;
}
</style>
